define([
	'chessman'
],function(Chessman){
	
	var UIFactory = {
		create : function(){
			
			var UI = function(){
				/**
				 * UI 属性设置
				 * 黑棋玩家面板，白棋玩家面板，棋盘面板，消息面板，控制面板，弹出框面板
				 */
				this.playerBlackPanel,this.playerWhitePanel,this.chessboardPanel,
				this.messagePanel,this.controlPanel,this.alertPanel;
				this.draw();
			}

			UI.prototype = {
				draw : function(){
					this.chessboardPanel = initChessboardPanel(this);
					this.playerBlackPanel = initPlayerBlack();
					this.playerWhitePanel = initPlayerWhite();
					this.messagePanel = initMessagePanel();
					this.controlPanel = initControlPanel();
					this.alertPanel = initAlertPanel();
				},
				downChessman : function(position,color){
					var target = document.getElementById(position.x+','+position.y);
					var chessman = document.createElement('div');
					
					target.appendChild(chessman);
					chessman.className =  Chessman.getColor(color);

					var w = target.offsetWidth - 6;
					chessman.style.height = w  + 'px';
					chessman.style.width = w + 'px';
					chessman.style.borderRadius = w/2 + 'px';
				},
				removeChessman : function(position){
					document.getELementById(position.x+','+position.y).removeChildNodes[0];  
				},
				cleanChessman : function(steps){
					var $this = this;
					steps.forEach(function(position){
						$this.removeChessman(position);
					});
				},
				setTurn : function(color){
					switch(color){
						case Chessman.BLACK : this.playerWhitePanel.className = this.playerWhitePanel.className.replace('active','');
									          this.playerBlackPanel.className += ' active';
											  break;
					    case Chessman.WHITE : this.playerBlackPanel.className = this.playerBlackPanel.className.replace('active','');
										      this.playerWhitePanel.className += ' active';
											  break;
						default: break;					  
					}
					this.setMessage('该'+Chessman.getColorName(color) +'落子');
				},
				setMessage : function(msg){
					this.messagePanel.innerHTML = msg;
				},
				alert : function(target,content,callback){					
					var $this = this;
					if($this.alertPanel.style.display == 'block'){
						return ;
					}
					$this.alertPanel.style.display = 'block';
				//	var h = $this.alertPanel.offsetHeight;
				//	$this.alertPanel.childNodes[0].style.display = 'none';
				//	$this.alertPanel.childNodes[1].style.display = 'none';
				//	$this.alertPanel.style.height = "0px";
					
				//	for(var height=1;height<h;height++){
				//		console.log(height+","+h);
				//		$this.alertPanel.style.height = height + 'px';
				//		$this.alertPanel.childNodes[0].style.display = 'block';
				//		$this.alertPanel.childNodes[1].style.display = 'block';
				//	}
					
					$this.alertPanel.childNodes[0].innerHTML = content;
					$this.alertPanel.childNodes[1].addEventListener('click',function(e){

						callback($this.alertPanel);
					});
				}
			}

			return new UI();
		}
	}
			
	var center = {};
    

	//初始化棋盘面板
	function initChessboardPanel($this){
		var chessboardPanel = document.createElement('div');
		document.body.appendChild(chessboardPanel);
		//样式设置
		chessboardPanel.className = 'chessboard';
	
	    var size = 19;
		var cellWidth = 29;
		
		center.eleWidth  = (cellWidth+1) * size;
		center.eleHeight = center.eleWidth;

		center.winWidth = document.body.offsetWidth;
		center.winHeight = document.body.offsetHeight;
		center.top = 60;
		center.left = (center.winWidth - center.eleWidth)/2;
        
		chessboardPanel.style.width = center.eleWidth + 'px';
		chessboardPanel.style.height = center.eleHeight + 'px';
		chessboardPanel.style.top = center.top + 'px';
		chessboardPanel.style.left = center.left + 'px';     
		
		for(var i=0;i<size;i++){
			for(var j=0;j<size;j++){
				var cell = document.createElement('div');
				chessboardPanel.appendChild(cell);
				cell.className = 'cell';
				cell.style.width = cellWidth + 'px';
				cell.style.height = cellWidth + 'px';
			}
		}
       
		$this.matrix = new Array();
		var begin = {};
		begin.left = center.left - cellWidth/2;
		begin.top = center.top - cellWidth/2;
		for(var y=0;y<size+1;y++){
			var row = new Array();
			for(var x=0;x<size+1;x++){
				var clickCell = document.createElement('div');
				document.body.appendChild(clickCell);
				clickCell.id = x + ',' + y;
				clickCell.className = 'clickCell';
				clickCell.style.width = (cellWidth+1) + 'px';
				clickCell.style.height = (cellWidth+1) + 'px';

				clickCell.style.top = begin.top + 'px';
				clickCell.style.left = begin.left + 'px';
				begin.left = begin.left + (cellWidth+1);
				
				row.push(Chessman.NULL);
			}
			begin.top = begin.top + (cellWidth+1);
			begin.left = center.left - cellWidth/2;
			$this.matrix.push(row);
		}

		return chessboardPanel;
	}

	//初始化黑棋玩家面板
	function initPlayerBlack(){
		var playerBlackPanel = document.createElement('div');
		document.body.appendChild(playerBlackPanel);
		//样式设置
		playerBlackPanel.className = 'head black';			
		playerBlackPanel.style.top = (center.top + 40) + 'px';
		playerBlackPanel.style.left = (center.left - playerBlackPanel.offsetWidth)/2 + 'px';
		
		var namePanel = document.createElement('span');
		document.body.appendChild(namePanel);
		namePanel.id = 'blackPlayer';
		namePanel.style.position = 'absolute';
		namePanel.style.top = (playerBlackPanel.offsetTop + playerBlackPanel.offsetWidth + 5) + 'px';
		namePanel.style.left = playerBlackPanel.offsetLeft + playerBlackPanel.offsetWidth/3 + 'px';
        namePanel.innerHTML = '玩家1';
		return playerBlackPanel;
	}

	//初始化白棋玩家面板
	function initPlayerWhite(){
		var playerWhitePanel = document.createElement('div');
		document.body.appendChild(playerWhitePanel);
		//样式设置
		playerWhitePanel.className = 'head white';          
		playerWhitePanel.style.top = (center.top + playerWhitePanel.offsetWidth+ 120) + 'px';
		playerWhitePanel.style.left = (center.left - playerWhitePanel.offsetWidth)/2 + 'px';
		        
		var namePanel = document.createElement('span');
		document.body.appendChild(namePanel);
		namePanel.id = 'whitePlayer';
		namePanel.style.position = 'absolute';
		namePanel.style.top = (playerWhitePanel.offsetTop + playerWhitePanel.offsetWidth + 5) + 'px';
		namePanel.style.left = playerWhitePanel.offsetLeft + playerWhitePanel.offsetWidth/3 + 'px';
		namePanel.innerHTML = '玩家2';                
		return playerWhitePanel;
	}
			
	//初始化消息面板
	function initMessagePanel(){
		var messagePanel = document.createElement('div');
		document.body.appendChild(messagePanel);
		//样式设置
		messagePanel.className = 'msg';
		return messagePanel; 
	}

	//初始化控制面板
	function initControlPanel(){
		var controlPanel = document.createElement('div');
		document.body.appendChild(controlPanel);
		//样式设置
		controlPanel.style.position	= 'absolute';
		controlPanel.style.top = (center.top + 40) + 'px';
		controlPanel.style.left = (center.left + center.eleWidth +40) +'px';

		var setting = document.createElement('span');
		controlPanel.appendChild(setting);
		setting.className = 'btn setting';
		setting.innerHTML = '设置';

		var regret = document.createElement('span');
		controlPanel.appendChild(regret);
		regret.className = 'btn regret';
		regret.innerHTML = '悔棋';

		var admit = document.createElement('span');
		controlPanel.appendChild(admit);
		admit.className = 'btn admit';
        admit.innerHTML = '认输';		
		
		return controlPanel;
	}

	//初始化弹出框面板
	function initAlertPanel(){
		var alertPanel = document.createElement('div');
		document.body.appendChild(alertPanel);
		//样式设置
		alertPanel.className = 'alert';
		alertPanel.style.top = center.top+24 +'px';
		alertPanel.style.left = (center.winWidth - alertPanel.offsetWidth)/2+'px';
		alertPanel.style.display = 'none';
		var content = document.createElement('div');
		alertPanel.appendChild(content);
		content.className = 'content';
		content.style.lineHeight = content.offsetHeight +'px';

		var button = document.createElement('div');
		alertPanel.appendChild(button);
		button.className = 'button pull-right';
		button.innerHTML = '确定';

		return alertPanel;
	}

	return UIFactory;
})
